<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器续写</title>
    <style>
        /*子孙后代选择器*/
        /*div div p{
            color:red
        }*/
        /*子元素选择器*/
        body>div>p{
            color:red
        }
        /*伪类选择器*/
        /*未访问状态*/
        a:link{
            color:red
        }
        /*访问过*/
        a:visited{
            color:yellow
        }
        /*悬停状态*/
        a:hover{
            color:pink
        }
        /*点击状态*/
        a:active{
            color:green
        }

    </style>

</head>
<body>
<a href="01文本相关.html">超链接1</a>
<a href="02列表标签.html">超链接2</a>
<a href="03图片标签.html">超链接3</a>
<a href="04from表单.html">超链接4</a>

<!--子孙后代选择器-->
<p>P1</p>
<div>
    <p>P2</p>
    <div><p>P3</p></div>
    <div>
        <p>P4</p>
        <div><p>P5</p></div>
    </div>
</div>


</body>
</html>